<template>
    <div>
        <HeaderTop title="" class="headertop">
            <span class="mui-icon mui-icon-arrowleft" slot="left" @click="$router.back()"></span>
        </HeaderTop>
        <div class="register">
                <a href="#" :class="active=='msg'?'massege':''"      @click="changeColor('msg')" >短信验证</a>
                <a href="#" :class="active=='email'?'massege':''"    @click=" changeColor('email') " >邮箱验证</a>
            </div>
        <form @submit.prevent="login">
            <!--手机登录-->
            <div class="phone-container"  v-show="isOn">
                <section class="login_message">
                    <input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
                    <button :disabled="!rightPhone" class="get_vertification" :class="{right_phone:rightPhone}"
                            @click.prevent="getCode">{{computeTime>0?`已发送(${computeTime}s)`:'获取验证码'}}
                    </button>
                </section>

                <div class="button-container">

                    <section class="login_vertification">
                        <input type="tel" maxlength="6" placeholder="验证码" v-model="code">
                    </section>
                </div>
            </div>

            <!--邮箱登录-->
            <div class="email-container" v-show="!isOn">
                <section class="login_message">
                    <input type="text" maxlength="11" placeholder="手机/邮箱/用户名" v-model="name">
                </section>

                <section class="login_vertification">
                    <input type="password" maxlength="6" placeholder="验证码" v-if="Toright" v-model="pwd">
                    <input type="text" maxlength="6" placeholder="验证码1" v-else v-model="pwd">
                </section>

                <div class="switch_button">
                    <div class="switch_circle" :class="{right:Toright}" @click="Toright=!Toright"></div>
                    <span class="txt"></span>
                </div>

                <section class="login_message">
                    <input type="text" maxlength="8" placeholder="验证码" v-model="captcha">
                    <img  class="get_vertification" src="../../images/1.jpg" alt="captcha">
                </section>
            </div>

        <button class="login_submit">登录</button>
        </form>
        <AlertTip :alertText="alertText" v-show="showAlert" @closeTip="closeTip"></AlertTip>
    </div>
</template>

<script>
    import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
    import AlertTip from '../../components/AlertTip/AlertTip.vue'
    import {reqSendCode,reqSmsLogin,reqPwdLogin } from '../../api'
    export default {
        name: "Login",
        data(){
            return{

                isActive:true,
                active:'msg',
                msg:'msg',
                email:'email',
                alertText: '',
                showAlert:false,

                name:'',
                pwd:'',
                captcha:'',
                phone:'',
                computeTime:0,
                isOn:true,
                Toright:false,
                code:'',
            }

        },
        methods:{
            changeColor(type){ this.active=type; this.isOn=!this.isOn },
            alertShow(alertText){
                this.showAlert = true
                this.alertText = alertText
            },
            closeTip(){
                this.showAlert = false
                this.alertText = ''
            },
            getisOn(){
              this.isOn =!this.isOn
            },

            async getCode(){
                //如果当前没有计时
                if(!this.computeTime){
                    this.computeTime = 30
                    this.intervalId =setInterval(()=>{
                        this.computeTime--
                        if(this.computeTime<=0)
                        {
                            clearInterval(this.intervalId)
                        }
                    },1000)
                    //发送ajax请求（向指定手机发送验证码）

                    const result = await reqSendCode(this.phone)
                    if (result.code === 1){
                        this.showAlert('失败')

                        if(this.computeTime){
                            this.computeTime = 0
                            clearInterval(this.intervalId)
                            this.intervalId = undefined
                        }
                    }
                }

            },
            //异步获取短信验证码

         login(){
                //前台表单数据验证
                if(this.isOn){
                    const {rightPhone, phone, code} = this
                    if(!this.rightPhone){
                        //手机号码不正确
                        this.alertShow('手机号不正确')

                    }else if(!/^\d{6}$/.test(this.code)){
                        //验证码必须是6位数字
                        this.alertShow('验证码不正确')
                    }
                }else {
                    //密码登录
                    const {name,pwd,captcha} =this
                    if(!this.name){
                        //用户名必须指定
                        this.alertShow('用户名不正确')
                    }else if (!this.pwd){
                        //密码必须指定
                        this.alertShow('密码不正确')

                    }else if (!this.captcha){
                        //验证码必须指定
                        this.alertShow('验证码必须指定')
                    }
                }
            }
        },
        computed:{
            rightPhone(){
                return /^1\d{10}$/.test(this.phone)  //匹配phone
            }
        },

        /*   changeColor:function(){


             if(this.flag){
                  this.isActive = "massege"
                  this.flag = false
              }
              else {
                  this.isActive="email"
                  this.flag=true
              }

       }
       */

        components:{
            HeaderTop,
            AlertTip
        }
    }
</script>

<style scoped lang="scss">
    .headertop{background-color: white}
    .register{display: flex;width: 60%;margin: 30px auto;justify-content: space-between;
    .massege{
        width: 40%;
        position: relative;
        text-align: center;
    }
    .massege::after{
        content: '';
        width: 60%;
        height: 4px;
        background: #0062cc;
        bottom: -20px;
        position: absolute;
        left: 20px;

    }
    .email{width: 40%;text-align: center;}
    }

    .get_vertification{
        .right_phone{color: black}
    }
    .switch-right{
        width: 60px;
        height: 30px;
        border: 1px solid #6d6d72;
        border-radius: 5%;
        .circle{position:absolute;z-index:99;background: red;width: 20px;height: 20px;border-radius: 50%;left:0px;transition:0.5s;transform: translateX(0)}
        .txt{position: absolute}
    }

    .right{
        .circle{position:absolute;background: red;width: 20px;height: 20px;border-radius: 50%;left: 45px;transition:0.5s;transform: translateX(45)}
        .txt{display: none}
    }

    .email-container {
        .get_vertification {
            width: 30px;
            height: auto;
            .right_phone {
                color: black
            }
        }

        .switch_button {
            position: relative;
            right: -85%;
            top: -50px;
            width: 60px;
            height: 30px;
            border: 1px solid #6d6d72;
            border-radius: 5%;

            .switch_circle {
                position: absolute;
                z-index: 99;
                background: red;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                left: 0px;
                margin-top: 4px;
                transition: 0.5s;
                transform: translateX(0)
            }

            .txt {
                position: absolute
            }

            .right {
                position: absolute;
                background: red;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                left: 40px;
                margin-top: 4px;
                transition: 0.5s;
                transform: translateX(45)
            }

            .txt {
                display: none
            }

        }
    }
</style>